<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习系统</title>
    <style type="text/css">
        body {
            background-image: url(/home/images/练习背景-01.png);
            background-repeat: no-repeat;
        }
        .box a:nth-child(1){
            position: absolute;
            top: 16px;
            left: 53px;
        }
        .box a:nth-child(2){
            position: absolute;
            top: 19px;
            left: 426px;
        }
        .box a:nth-child(3){
            position: absolute;
            top: 12px;
            left: 672px;
        }
        .box a:nth-child(4){
            position: absolute;
            top: 22px;
            left: 910px;
        }
        .box a:nth-child(5){
            position: absolute;
            top: 317px;
            left: 748px;
        }
        .box a:nth-child(6){
            position: absolute;
            top: 351px;
            left: 422px;
        }
        .box a:hover {
            box-shadow: 0 0 100px rgba(0,255,255,0.5) inset;
            border-radius: 1000px;
            transform: scale(1.3);
            z-index: 1000;
        }

        @keyframes bounceInDown {
                  from, 60%, 75%, 90%, to {
                    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                  }

                  0% {
                    opacity: 0;
                    transform: translate3d(0, -3000px, 0);
                  }

                  60% {
                    opacity: 1;
                    transform: translate3d(0, 25px, 0);
                  }

                  75% {
                    transform: translate3d(0, -10px, 0);
                  }

                  90% {
                    transform: translate3d(0, 5px, 0);
                  }

                  to {
                    transform: none;
                  }
            }

        .bounceInDown {
                      animation-name: bounceInDown;
            }

        .bounceInDown {
                animation-name: hinge;
                font-size: 30px;
                color: red;
                position: absolute;
                left: 738px;
                top: 133px;
                animation: bounceInDown 3s linear infinite;
            }
    </style>
</head>
<body>
    <h4 class="bounceInDown">新手村在这里</h4>
    <div class="box">
        <a href="javascript:;" onclick="bank()">  <img src="/home/images/练习1.png" title="银行"></a>
        <a href="javascript:;" onclick="iport()">    <img src="/home/images/练习2.png" title="进口公司"></a>
        <a href="javascript:;" onclick="nhelp()">  <img src="/home/images/练习3.png" title="新手村"></a>
        <a href="javascript:;" onclick="factory()">   <img src="/home/images/练习4.png" title="工厂"></a>
        <a href="javascript:;" onclick="sea()">   <img src="/home/images/练习5.png" title="海关"></a>
        <a href="javascript:;" onclick="eport()">    <img src="/home/images/练习6.png" title="出口公司"></a>
    </div>
    <script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"></script>
    <script type="text/javascript">
        function nhelp(){
            layer.open({
                title: '新手村',
                area: ['893px', '600px'],
                maxmin: true,
                type: 2, 
                content: "/home/practice/nhelp"
            });
        }
        function bank(){
            layer.open({
                title: '银行',
                area: ['893px', '600px'],
                maxmin: true,
                type: 2, 
                content: "/home/practice/bank"
            });
        }
        function iport(){
            layer.open({
                title: '进口公司',
                area: ['893px', '600px'],
                maxmin: true,
                type: 2, 
                content: "/home/practice/import"
            });
        }
        function factory(){
            layer.open({
                title: '工厂',
                area: ['893px', '600px'],
                maxmin: true,
                type: 2, 
                content: "/home/practice/factory"
            });
        }
        function sea(){
            layer.open({
                title: '海关',
                area: ['893px', '600px'],
                maxmin: true,
                type: 2, 
                content: "/home/practice/sea"
            });
        }
        function eport(){
            layer.open({
                title: '出口公司',
                area: ['893px', '600px'],
                maxmin: true,
                type: 2, 
                content: "/home/practice/export"
            });
        }
    </script>
</body>
</html>
